<template>
    <div class="type-list page">
        <div ref="filter" class="filter">
            <div class="items">

                <div :style="transferStyle" class="sw"></div>
                <div ref="item" @click="select(index)" :class="{selected:index==pos}" class="item"
                     v-for="(item,index) in typeList"
                     :key="index"
                >
                    <span class="txt">{{item.name}}</span>
                    <!--                        <span></span>-->
                </div>

            </div>

        </div>

        <cube-scroll @pulling-down="pullDown" @pulling-up="pullUpLoad" ref="scroll" :options="options"
                     :data="goodsList">
            <div class="list">
                <goodsItem @click.native="turn(goods.id)"  :key="index" :goods="goods" class="goods-item"
                           v-for="(goods,index) in goodsList"></goodsItem>
            </div>
        </cube-scroll>
    </div>
</template>

<script>
    import goodsItem from '@/components/goods-item'
    import {listGoods, listType} from "../../api/goods";
    import BScroll from 'better-scroll'

    export default {
        name: "list",
        components: {
            goodsItem
        },
        created() {


        },
        activated() {

            if (!this.typeList) {
                listType().then(res => {
                    this.typeList = res.data
                    if (this.typeList.length > 3) {
                        this.$nextTick(()=>{
                            this.initWd()
                            this.initScroll()
                            this.scrollFilter()
                        })
                    }
                    this.type = this.$route.query.type
                    if(!this.type){
                        this.type = this.typeList[0].id
                    }
                    this.getList()

                })
            }else {
                this.type = this.$route.query.type

                if(!this.type){
                    this.type = this.typeList[0].type
                }
                this.getList()
                this.scrollFilter()
            }


        },
        computed: {
            transferStyle() {
                let style = `transform:translateX(${this.pos * this.wd}px);
                transition:all linear .2s`
                return style
            }
        },
        methods: {
            turn(id){
                this.$router.push({
                    path:'/detail',
                    query:{
                        id:id
                    }
                })
            },
            initWd() {//初始化最小距离
                if (this.typeList.length > 0) {
                    this.wd = this.$refs.item[1].offsetLeft - this.$refs.item[0].offsetLeft
                }
            },
            initScroll() {
                this.scroll = new BScroll('.filter', {
                    scrollX: true,
                    scrollY: false,
                    click: true,
                })
            },
            scrollFilter() {
                if (this.typeList) {
                    this.typeList.forEach((type, index) => {

                        if (type.id == this.type) {

                            this.pos = index
                            this.scroll.scrollToElement(this.$refs.item[index])
                            if (index > 2) {
                                let sx = (index - 2) * 56
                                if (-sx > this.scroll.maxScrollX) {

                                    console.log(-sx)
                                }else {
                                    this.scroll.scrollTo(this.scroll.maxScrollX, 0, 1000)
                                }

                            } else {
                                this.scroll.scrollTo(0, 0, 1000)
                            }


                        }
                    })
                }
            },
            pullDown() {
                this.page = 1
                this.getList()
            },
            pullUpLoad() {
                this.getList()
            },
            getList() {
                listGoods(this.page, this.type, this.order).then(res => {
                    // this.goodsList = res.data
                    if (this.page == 1) {//刷新
                        this.goodsList = res.data
                        // console.log(this.orderList)
                    } else {//添加
                        this.goodsList = this.goodsList.concat(res.data)
                    }
                    this.page++
                })
            },
            select(index) {

                // console.log(this.$refs.item[index],2000)
                // let maxScrollX = this.$refs.filter.scrollWidth - this.$refs.filter.clientWidth
                // this.$refs.filter.scrollTo(100,0)
                // console.log(maxScrollX)
                // console.log(this.$refs.filter.scrollWidth)
                // console.log(this.$refs.filter.scrollLeft)
                this.pos = index
                let item = this.typeList[index]
                this.type = item.id
                this.pullDown()
                this.scrollFilter()
            }
        },
        watch: {
            type() {


            }
        },
        data() {
            return {
                scroll: null,
                options: {
                    pullDownRefresh: {
                        txt: ' ',
                        stopTime: 0
                    },
                    pullUpLoad: true,
                },
                typeList: null,
                goodsList: null,
                wd: null,
                page: 1,
                type: null,
                order: null,
                pos: null,
                filters: [
                    {
                        txt: '默认',
                        val: 'sort,id desc'
                    },
                    {
                        txt: '价格',
                        val: 'price'
                    },
                    {
                        txt: '时间',
                        val: 'id desc'
                    },
                    {
                        txt: '销量',
                        val: 'id'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="stylus">
    ::-webkit-scrollbar {
        display: none
    }

    .type-list
        background-color $page-bg

        .filter
            position relative
            background-color white
            height 44px
            /*display flex*/
            /*align-items center*/
            /*justify-content space-between*/

            /*display flex*/
            white-space nowrap

            .items
                padding 0 10px 0 28px
                width fit-content
                .item
                    margin-right 20px
                    line-height 44px
                    display inline-block
                    /*height 100%*/
                    /*line-height 44px*/
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #6F6F6F
                    text-align center
                    width 36px
                    &:last-child
                        margin-right 0
                    &.selected
                        color: rgba(247, 137, 94, 1);


            .sw
                width 36px
                height 1.5px
                background-color #F7895E
                position absolute
                left 28px
                bottom 0

        .list
            padding 10px 10px 0
            display flex
            flex-wrap wrap
            justify-content space-between

            .goods-item
                border-radius 2.5px
                width 165px
                margin-bottom 10px


</style>